import {
  Modal,
  Form,
  Input,
  Button,
  Checkbox,
  Tooltip,
  notification,
} from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";

const { remote, ipcRenderer } = window.electron;
const { connection } = remote.getGlobal("config");

export default class Connect extends React.PureComponent {
  state = {
    visible: false,
    loading: false,
  };

  componentDidMount() {
    ipcRenderer.on("showConnect", () => {
      this.setState({ visible: true });
    });
  }

  onFinish = (values) => {
    this.setState({ loading: true });
    const res = ipcRenderer.sendSync("connect", values);
    this.setState({ loading: false });
    if (res.status === 0) {
      notification.success({
        message: "登录成功",
        description: "现在您可以选择数据来整理了",
      });
      // 储存配置
      ipcRenderer.send("setConfig", { connection: values });
      this.setState({ visible: false });
    } else if (res.status === 1) {
      notification.warning({
        message: "访问日志文件失败",
        description: res.message || "请确认您拥有日志文件的读权限",
      });
    } else if (res.status === 2) {
      notification.error({ message: "出错了", description: res.message });
    }
  };

  onFinishFailed = () => {
    // console.log("Failed:", errorInfo);
  };

  getEndPointLabel = () => {
    return (
      <span>
        EndPoint{" "}
        <Tooltip
          title="例如：http(s)://oss-cn-shenzhen.aliyuncs.com或者http(s)://oss.my.com"
          overlayStyle={{ wordBreak: "break-all" }}
        >
          <QuestionCircleOutlined />
        </Tooltip>
      </span>
    );
  };

  render() {
    const { visible, loading } = this.state;
    return (
      <Modal
        centered
        closable={false}
        visible={visible}
        title="配置OSS连接信息"
        footer={null}
      >
        <Form
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          name="connection"
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
          initialValues={connection}
        >
          <Form.Item
            label={this.getEndPointLabel()}
            name="endpoint"
            rules={[
              { required: true, message: "请输入地域节点" },
              {
                type: "url",
                message:
                  "地域节点应该以http://或者https://开头，且不包含bucket name",
              },
            ]}
          >
            <Input placeholder="请输入地域节点..." />
          </Form.Item>
          <Form.Item
            name="cname"
            wrapperCol={{ offset: 8, span: 16 }}
            valuePropName="checked"
          >
            <Checkbox>是否是用户域名</Checkbox>
          </Form.Item>
          <Form.Item
            label="AccessKeyId"
            name="keyid"
            rules={[{ required: true, message: "请输入AccessKeyId" }]}
          >
            <Input placeholder="请输入AccessKeyId..." />
          </Form.Item>
          <Form.Item
            label="AccessKeySecret"
            name="keysecret"
            rules={[{ required: true, message: "请输入AccessKeySecret" }]}
          >
            <Input.Password placeholder="请输入AccessKeySecret..." />
          </Form.Item>
          <Form.Item
            label="Bucket Name"
            name="bucket"
            rules={[{ required: true, message: "请输入Bucket Name" }]}
          >
            <Input placeholder="请输入日志存储所在的Bucket Name..." />
          </Form.Item>
          <Form.Item
            label="日志前缀"
            name="prefix"
            rules={[{ required: true, message: "请输入日志前缀" }]}
          >
            <Input placeholder="请输入日志转存所设置的日志前缀..." />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button loading={loading} type="primary" htmlType="submit">
              登录
            </Button>
            <Button
              className="ml-5"
              onClick={() => this.setState({ visible: false })}
            >
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}
